<template>
    <div>
        <show-names
        :names="names"
        >
        <!-- 通过 v-slot="slotProps" 接收 item，index -->
            <template v-slot="slotProps">
                <h2>{{slotProps.item}} --- {{slotProps.index}}</h2>
            </template>
        </show-names>
        <div style="background:red;height:2px;"></div>

        <show-names
        :names="names"
        >   
        <!-- 可以自定义名字 -->
            <template v-slot="yzh">
                <h2>{{yzh.item}} --- {{yzh.index}}</h2>
            </template>
        </show-names>
        <div style="background:red;height:2px;"></div>

        <!-- 独占默认插槽的缩写  只有一个插槽时 -->
        <show-names
        :names="names"
        v-slot="slotProps"
        >
            <h2>{{slotProps.item}} --- {{slotProps.index}}</h2>
        </show-names>

    </div>
</template>
<script>
import ShowNames from './ShowNames.vue'
export default {
    components: {
        ShowNames
    },
    name: '',
    data() {
       return {
           names: ["Luffy", "Sabo", "ACE", "yzh"]
       }
    },
    created() {},
    methods: {},
}
</script>
<style>
</style>
